<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>04 计算属性和监听器</title>
  </head>
  <body>
    <div id="app">
      语文： <input type="text" v-model="chinese" /> 
      数学：<input type="text" v-model="math" />
      <br />
      <!-- 普通方法写在v-model里面必须要加（） -->
      总分(普通方法-单向) :<input type="text" v-model="total1()"  />  <br />
      <!-- 计算属性写在v-model里面不要加() -->
      总分(计算属性-单向) :<input type="text" v-model="total2"  />  <br />
      总分(计算属性-双向) :<input type="text" v-model="total3"  />  <br />
      总分(监听器) : <input type="text" v-model="total4"  />  <br />
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        chinese: "90",
        math : '80',
        total4 : 0,
        arr : [{
            checked : false
        }]
      },

      //方法
      methods : {
          //统计总分
          total1() {
            console.log('methods被调用了');
            //   console.log(this.chinese,8888);//this 指的是new Vue出来的实例，里面有很多系统的属性和方法
            return this.chinese * 1 + this.math * 1;
          }
      },

      //计算属性
      computed:{
        //单向写法：只有getter方法,里面会有一个return
        total2() {
            console.log('computed被调用了-getter');
            return this.chinese * 1 + this.math * 1;
        },

        //双向的写法
        total3 : {
            //调用total3这个属性，默认就是走get方法
            get() {
                //这里写的是getter方法
                return this.chinese * 1 + this.math * 1;
            },
            set(val) {
                //获取视图层输入的内容
                console.log(val);
                this.chinese = val/2;
                this.math = val/2;
            }
        }
      },

      //监听器
      watch:{
        chinese(newval) {
            console.log(newval,666);//最新语文成绩
            this.total4 = newval * 1 + this.math * 1;
        },
        total4(newval) {
            console.log('总分变了', newval);
            this.chinese = newval/2;
            this.math = newval/2;

        }
      },

      
    });

    // let arr = [1,2,3];
    // arr.push()
  </script>
</html>
